<template>
    <div class="toolbox-table-v">
        <div class="tabs-card-edit-box">
            <a-tabs type="card" v-model:activeKey="activeKey" @change="activeChange">
                <a-tab-pane key="表格不换行1" tab="表格不换行1"></a-tab-pane>
                <a-tab-pane key="表格不换行2" tab="表格不换行2"></a-tab-pane>
                <a-tab-pane key="表格换行1" tab="表格换行1"></a-tab-pane>
                <a-tab-pane key="表格换行2" tab="表格换行2"></a-tab-pane>
                <a-tab-pane key="表格居左" tab="表格居左"></a-tab-pane>
                <a-tab-pane key="表格居中" tab="表格居中"></a-tab-pane>
                <a-tab-pane key="表格居右" tab="表格居右"></a-tab-pane>
            </a-tabs>
        </div>
        <div v-if="activeKey == '表格不换行1'" class="content-regionkz-box">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxe" 
                :formItem="formItem"
                :tableDataList="tableDataList1"
                :conditionBtnRow="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <span href="#">{{ row.data4 }}</span>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit" >编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '表格不换行2'" class="content-regionkz-box">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxe1" 
                :formItem="formItem1"
                :tableDataList="tableDataList1"
                :conditionBtnRow="true"
                :searchType="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <a href="#">{{ row.data4 }}</a>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit">编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '表格换行1'" class="content-regionkz-box">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxe" 
                :formItem="formItem"
                :tableDataList="tableDataList1"
                :conditionBtnRow="true"
                :isCanWrap="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <a href="#">{{ row.data4 }}</a>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit">编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item class="">
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '表格换行2'" class="content-regionkz-box">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxe" 
                :formItem="formItem1"
                :tableDataList="tableDataList1"
                :conditionBtnRow="true"
                :isCanWrap="true"
                :searchType="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <a href="#">{{ row.data4 }}</a>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit">编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item class="">
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '表格居左'" class="content-regionkz-box"> 
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxejz" 
                :formItem="formItem"
                :tableDataList="tableDataListjz"
                :conditionBtnRow="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
                :tableWidth="823"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <span href="#">{{ row.data4 }}</span>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit" >编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '表格居中'" class="content-regionkz-box" style="display: flex;justify-content: center;">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxejz" 
                :formItem="formItem"
                :tableDataList="tableDataListjz"
                :conditionBtnRow="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
                :tableWidth="823"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <span href="#">{{ row.data4 }}</span>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit" >编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
        <div v-if="activeKey == '表格居右'" class="content-regionkz-box" style="display: flex;justify-content: flex-end;">
            <commpVxeTable
                :key="refreshTable"
                ref="headmanVxeTable"
                :config="{
                    api:'',
                    rowId: 'id',
                }" 
                :columns="cleanColumnsVxejz" 
                :formItem="formItem"
                :tableDataList="tableDataListjz"
                :conditionBtnRow="true"
                :occupancyHeight="55"
                :searchMinusWidth="22"
                :tableWidth="823"
            > 
                <template v-slot:data1_default="{row}">
                    <span style="padding-right: 21;" v-if="row.data1.length == 2">
                        <span v-for="(trem,tI) in row.data1.split('')" :key="tI" >
                            {{trem}} 
                            <span v-if="tI+1 !== row.data1.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.data1 }}</span>
                </template>
                <template v-slot:data4_name="{row}">
                    <span href="#">{{ row.data4 }}</span>
                </template>
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <a-button class="blue-btn" type="primary" icon="plus">新增</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="export">导出</a-button>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item>
                        <template>
                            <a-button icon="import">导入</a-button>
                        </template>
                    </vxe-form-item>
                    <!-- <vxe-form-item>
                        <template>
                            <a-button class="red-btn" type="primary" >批量删除</a-button>
                        </template>
                    </vxe-form-item> -->
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" icon="edit" >编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="green-btn" type="primary" icon="eye">查看</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" icon="delete">删除</a-button>
                        </a-form-item>
                    </a-form> 
                </template>
            </commpVxeTable>
        </div>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            refreshTable:null,
            activeKey:'表格不换行1',
            tableDataList1:[{
                data1:'冼羽',
                data2:'男',
                data3:'22',
                data4:'宁德时代新能源科技股份有限公司',
                data5:'12356974562',
                data6:'今年《财富》世界500强排行榜企业的营业收入总和约为41万亿美元，比上年上涨8.4%。',
            },{
                data1:'陈意悦',
                data2:'女',
                data3:'21',
                data4:'广州工业投资控股集团有限公司',
                data5:'15632698456',
                data6:'据财富中文网，8月2日，2023年《财富》世界500强排行榜发布。',
            },{
                data1:'陆谕',
                data2:'男',
                data3:'25',
                data4:'广东省广新控股集团有限公司',
                data5:'16325698741',
                data6:'榜单显示，沃尔玛连续第十年成为全球最大公司。沙特阿美首次上升至第二位。',
            },{
                data1:'鹿荐',
                data2:'女',
                data3:'23',
                data4:'立讯精密工业股份有限公司',
                data5:'16325987456',
                data6:'榜单显示，沃尔玛连续第十年成为全球最大公司。沙特阿美首次上升至第二位。',
            },{
                data1:'陈妤姝',
                data2:'女',
                data3:'22',
                data4:'宁德时代新能源科技股份有限公司',
                data5:'16326598456',
                data6:'中国共有142家公司上榜 数量继续位居各国之首',
            },{
                data1:'林深',
                data2:'男',
                data3:'19',
                data4:'立讯精密工业股份有限公司',
                data5:'17568965326',
                data6:'中国共有142家公司上榜 数量继续位居各国之首',
            },{
                data1:'韦妤妤',
                data2:'女',
                data3:'21',
                data4:'广东省广新控股集团有限公司',
                data5:'15962359865',
                data6:'中国共有142家公司上榜 数量继续位居各国之首',
            },{
                data1:'张起灵',
                data2:'男',
                data3:'29',
                data4:'立讯精密工业股份有限公司',
                data5:'18562369589',
                data6:'中国共有142家公司上榜 数量继续位居各国之首',
            },{
                data1:'陈楚绩',
                data2:'男',
                data3:'30',
                data4:'立讯精密工业股份有限公司',
                data5:'14856236975',
                data6:'中国共有142家公司上榜 数量继续位居各国之首',
            },{
                data1:'欧阳懿歆',
                data2:'女',
                data3:'21',
                data4:'广东省广新控股集团有限公司',
                data5:'12659874562',
                data6:'榜单显示，沃尔玛连续第十年成为全球最大公司。',
            }],
            formItem:[{
                label: '姓名',
                model: 'data1',
                interval:true,
                
            },{
                label: '性别',
                model: 'data2',
            },{
                label: '年龄',
                model: 'data3',
            },{
                label: '联系电话',
                model: 'data4',
            },{
                label: '工作单位',
                model: 'data5',
            }],
            formItem1:[{
                label: '姓名',
                model: 'data1',
                interval:true,
                
            },{
                label: '性别',
                model: 'data2',
                searchType:'收起',
            },{
                label: '年龄',
                model: 'data3',
                searchType:'收起',
            },{
                label: '联系电话',
                model: 'data4',
                searchType:'收起',
            },{
                label: '工作单位',
                model: 'data5',
            }],
            cleanColumnsVxe1:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '姓名', //列头显示文字
                field: 'data1',
                width:100,
                titleInterval:true,
                slots: {
                    header:'data1_header',
                    default:'data1_default',
                }
            },{
                title: '性别', //列头显示文字
                field: 'data2',
                titleInterval:true,
                slots: {
                    header:'data2_header',
                },
                width:100,
            },{
                title: '年龄', //列头显示文字
                field: 'data3',
                titleInterval:true,
                slots: {
                    header:'data3_header',
                },
                width:100,
            },{
                title: '联系电话', //列头显示文字
                field: 'data5',
                width:120,
            },{
                title: '工作单位', //列头显示文字
                field: 'data4',
                sortable:true,//排序
                align:'left',
                headerAlign:'center',
                slots: {
                    // 使用插槽模板渲染
                    default: 'data4_name',
                },
            },{
                title: '其他说明', //列头显示文字
                field: 'data6',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:255,
            }],
            cleanColumnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '姓名', //列头显示文字
                field: 'data1',
                width:100,
                titleInterval:true,
                slots: {
                    header:'data1_header',
                    default:'data1_default',
                }
            },{
                title: '性别', //列头显示文字
                field: 'data2',
                titleInterval:true,
                slots: {
                    header:'data2_header',
                },
                width:100,
            },{
                title: '年龄', //列头显示文字
                field: 'data3',
                titleInterval:true,
                slots: {
                    header:'data3_header',
                },
                width:100,
            },{
                title: '联系电话', //列头显示文字
                field: 'data5',
                width:120,
            },{
                title: '工作单位', //列头显示文字
                field: 'data4',
                sortable:true,//排序
                align:'left',
                headerAlign:'center',
                slots: {
                    // 使用插槽模板渲染
                    default: 'data4_name',
                },
            },{
                title: '其他说明', //列头显示文字
                field: 'data6',
                align:'left',
                headerAlign:'center',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:255,
            }],
            tableDataListjz:[{
                data1:'陈楚绩',
                data2:'女',
                data3:'21',
                data5:'14856236975',
                data6:'452032659875423658',
            },{
                data1:'韦妤妤',
                data2:'女',
                data3:'21',
                data5:'14856236975',
                data6:'452032659875423658',
            },{
                data1:'鹿荐',
                data2:'女',
                data3:'23',
                data5:'14856236975',
                data6:'452032659875423658',
            },{
                data1:'陆谕',
                data2:'男',
                data3:'25',
                data5:'14856236975',
                data6:'452032659875423658',
            }],
            cleanColumnsVxejz:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '姓名', //列头显示文字
                field: 'data1',
                width:70,
                titleInterval:true,
                slots: {
                    header:'data1_header',
                    default:'data1_default',
                }
            },{
                title: '性别', //列头显示文字
                field: 'data2',
                titleInterval:true,
                slots: {
                    header:'data2_header',
                },
                width:70,
            },{
                title: '年龄', //列头显示文字
                field: 'data3',
                titleInterval:true,
                slots: {
                    header:'data3_header',
                },
                width:70,
            },{
                title: '联系电话', //列头显示文字
                field: 'data5',
                width:109,
            },{
                title: '身份证号', //列头显示文字
                field: 'data6',
                width:185,
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:255,
            }]
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        activeChange(){
            this.refreshTable = Date.now()
        }
    }
}
</script>
<style lang="less">
.toolbox-table-v{
    .content-regionkz-box{
        border: 1px solid #38f;
        margin: 0 11px;
    }
    .tabs-card-edit-box{
        margin: 10px 10px 0 10px;
        .ant-tabs-bar{
            border: 0 !important;
            margin: 0 !important;
        }
        .ant-tabs-tab{
            background: #edeff3 !important;
            font-size: 14px !important;
            padding:0 8px !important;
            height: 32px !important;
            line-height: 32px !important;
        }
        .ant-tabs-tab-active{
            background-color: #38f !important;
            color: #fff !important;
        }
        .ant-tabs-nav-container{
            height: 32px !important;
        }
    }
}
</style>